<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>人像特征分类</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#00B42A',
                        warning: '#FF7D00',
                        danger: '#F53F3F',
                        dark: '#1D2129',
                        light: '#F2F3F5',
                    },
                    fontFamily: {
                        inter: ['Inter', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .bg-gradient-tech {
                background: linear-gradient(135deg, #165DFF 0%, #00B42A 100%);
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            .card-hover {
                transition: all 0.3s ease;
            }
            .card-hover:hover {
                transform: translateY(-5px);
                box-shadow: 0 10px 25px -5px rgba(22, 93, 255, 0.1), 0 10px 10px -5px rgba(22, 93, 255, 0.04);
            }
        }
    </style>
</head>
<body class="bg-gray-50 font-inter text-dark min-h-screen flex flex-col">
<header class="bg-white shadow-sm sticky top-0 z-50 transition-all duration-300">
    <div class="container mx-auto px-4 py-3 flex items-center justify-between">
        <div class="flex items-center space-x-2">
            <i class="fa fa-diamond text-primary text-2xl"></i>
            <h1 class="text-xl font-bold text-dark">人像特征分类</h1>
        </div>
        <div class="flex items-center space-x-4">
            <span class="text-sm text-gray-500">版本 1.0.0</span>
            <button class="text-primary hover:text-primary/80 transition-colors">
                <i class="fa fa-question-circle"></i>
                <span class="ml-1 hidden md:inline">帮助</span>
            </button>
        </div>
    </div>
</header>

<main class="flex-grow container mx-auto px-4 py-8">
    <div id="message-area" class="mb-6 hidden">
        <div id="message-content" class="py-3 px-4 rounded-lg text-center font-medium transition-all duration-300"></div>
    </div>

    <div class="max-w-3xl mx-auto">
        <div class="bg-white rounded-xl shadow-lg overflow-hidden mb-8 card-hover">
            <div class="bg-gradient-tech p-4 text-white">
                <h2 class="text-xl font-bold text-shadow flex items-center">
                    <i class="fa fa-cogs mr-2"></i>
                    人像特征分类
                </h2>
            </div>

            <div class="p-6 space-y-6">
                <div class="space-y-2">
                    <label for="sourceDir" class="block text-sm font-medium text-gray-700">
                        <i class="fa fa-folder-open-o mr-1"></i> 待分类图片目录
                    </label>
                    <div class="flex items-center">
                        <input type="text" id="sourceDir" class="flex-grow px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary" placeholder="请输入待分类图片目录">
                    </div>
                </div>

                <div class="space-y-2">
                    <label for="targetDir" class="block text-sm font-medium text-gray-700">
                        <i class="fa fa-folder-o mr-1"></i> 分类结果图片目录
                    </label>
                    <div class="flex items-center">
                        <input type="text" id="targetDir" class="flex-grow px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary" placeholder="请输入分类结果图片目录">
                    </div>
                </div>

                <div class="space-y-2">
                    <label for="token" class="block text-sm font-medium text-gray-700">
                        <i class="fa fa-key mr-1"></i> 卡密
                    </label>
                    <input type="text" id="token" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary" placeholder="请输入卡密">
                </div>

                <div class="pt-2">
                    <button id="startClassification" class="w-full bg-primary hover:bg-primary/90 text-white py-3 px-4 rounded-lg transition-colors flex items-center justify-center text-lg font-medium shadow-md hover:shadow-lg disabled:opacity-50 disabled:cursor-not-allowed">
                        <i class="fa fa-play-circle mr-2"></i>
                        开始分类
                    </button>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-xl shadow-lg p-6 card-hover">
            <h3 class="text-lg font-semibold text-gray-800 mb-3 flex items-center">
                <i class="fa fa-info-circle text-primary mr-2"></i>
                功能说明
            </h3>
            <ul class="space-y-2 text-gray-600">
                <li class="flex items-start">
                    <i class="fa fa-check-circle text-secondary mt-1 mr-2"></i>
                    <span>图片目录选择 ：原图片所在目录</span>
                </li>
                <li class="flex items-start">
                    <i class="fa fa-check-circle text-secondary mt-1 mr-2"></i>
                    <span>选择目标目录 ：分类后的目录</span>
                </li>
                <li class="flex items-start">
                    <i class="fa fa-check-circle text-secondary mt-1 mr-2"></i>
                    <span>处理完成后，结果将保存到目标目录中</span>
                </li>
                <li class="flex items-start">
                    <i class="fa fa-check-circle text-secondary mt-1 mr-2"></i>
                    <span>有处理中的分类任务时，不能重复提交</span>
                </li>
                <li class="flex items-start">
                    <i class="fa fa-check-circle text-secondary mt-1 mr-2"></i>
                    <span>token为下载令牌，价格：10元/千张</span>
                </li>
            </ul>
        </div>
    </div>
</main>

<script>
    // 全局变量
    let classificationInProgress = false;
    let progressInterval; // 尽管不再使用进度条，但如果模拟进度逻辑存在，这个变量可能仍然被引用，所以暂时保留定义

    // DOM元素
    const sourceDirInput = document.getElementById('sourceDir');
    const targetDirInput = document.getElementById('targetDir');
    const tokenInput = document.getElementById('token');
    const startClassificationBtn = document.getElementById('startClassification');
    const messageArea = document.getElementById('message-area');
    const messageContent = document.getElementById('message-content');

    // 显示消息提示
    const showMessage = (message, type = 'info') => {
        messageContent.textContent = message;
        if (type === 'info') {
            messageContent.className = 'py-3 px-4 rounded-lg text-center font-medium bg-blue-50 text-blue-800 border border-blue-200';
        } else if (type === 'success') {
            messageContent.className = 'py-3 px-4 rounded-lg text-center font-medium bg-green-50 text-green-800 border border-green-200';
        } else if (type === 'error') {
            messageContent.className = 'py-3 px-4 rounded-lg text-center font-medium bg-red-50 text-red-800 border border-red-200';
        } else if (type === 'warning') {
            messageContent.className = 'py-3 px-4 rounded-lg text-center font-medium bg-yellow-50 text-yellow-800 border border-yellow-200';
        }
        messageArea.classList.remove('hidden');
        messageArea.classList.add('animate-fadeIn');
        messageArea.scrollIntoView({ behavior: 'smooth', block: 'start' });
    };

    // 隐藏消息提示 (尽管当前未使用，保留以便将来扩展)
    const hideMessage = () => {
        messageArea.classList.add('hidden');
    };

    // 开始分类
    startClassificationBtn.addEventListener('click', async () => {
        if (classificationInProgress) {
            showMessage('分类正在进行中，请勿重复提交', 'warning');
            return;
        }

        // 直接从文本框中获取值
        const sourceDir = sourceDirInput.value.trim();
        const targetDir = targetDirInput.value.trim();
        const token = tokenInput.value.trim();

        // 验证参数：均为必填项
        if (!sourceDir) {
            showMessage('请填写图片目录', 'error');
            return;
        }
        if (!targetDir) {
            showMessage('请填写目标目录', 'error');
            return;
        }
        if (!token) {
            showMessage('请填写Token', 'error');
            return;
        }

        classificationInProgress = true;
        showMessage('分类已开始，请勿重复提交', 'info');
        startClassificationBtn.disabled = true;
        startClassificationBtn.innerHTML = '<i class="fa fa-spinner fa-spin mr-2"></i> 处理中...';

        try {
            const param = {
                'sourceDir': sourceDir,
                'targetDir': targetDir,
                'token': token
            };
            const response = await fetch('http://localhost:8090/saas/image/faceFeatureFB', {
                method: 'POST',
                body: JSON.stringify(param),
                headers: { 'Content-Type': 'application/json'}
            });
            if (!response.ok) {
                throw new Error(`HTTP错误，状态码: ${response.status}`);
            }

            const result = await response.json();

            if (result.code === 200) {
                showMessage(result.msg || '分类完成', 'success');
            } else {
                showMessage(result.msg || '分类失败', 'error');
            }
        } catch (error) {
            console.error('请求失败:', error);
            showMessage('请求失败: ' + error.message, 'error');
        } finally {
            classificationInProgress = false;
            startClassificationBtn.disabled = false;
            startClassificationBtn.innerHTML = '<i class="fa fa-play-circle mr-2"></i> 开始分类';
        }
    });

    // 添加淡入动画
    document.head.insertAdjacentHTML('beforeend', `
            <style>
                @keyframes fadeIn {
                    from { opacity: 0; transform: translateY(-10px); }
                    to { opacity: 1; transform: translateY(0); }
                }
                .animate-fadeIn {
                    animation: fadeIn 0.3s ease-out forwards;
                }
            </style>
        `);
</script>
</body>
</html>